跳到主要内容

ECMAScript 2024 （简称 ES15） 主要聚焦于提升开发效率、增强语言表达能力和优化性能。

一、 Promise.withResolvers() ：简化 Promise 的创建​

在创建 Promise 时，若需要外部手动调用 resolve 或 reject （如异步事件回调场景），传统写法需要在 executor 函数中捕获这两个方法，代码繁琐且易产生作用域的问题。

传统写法
let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// 外部调用
setTimeout(() => resolve('完成'), 4200);

而使用 Promise.withResolvers() 直接返回一个包含 promise、resolve、reject 的对象，简化了上述流程。

使用 Promise.withResolvers()
const { promise, resolve, reject } = Promise.withResolvers();

// 外部直接调用
setTimeout(() => resolve('完成'), 4200);

1. 应用场景​

  • 异步状态监听（如 webSocket 消息、定时器回调）
  • 复杂状态管理（如需在多个地方控制 Promise 状态）
  • 代替回调地狱，更优雅的衔接异步逻辑

二、 ArrayBuffer 和 SharedArrayBuffer 的新功能​

这些特性为底层二进制数据提供了更大的灵活性。

1. ArrayBuffer.prototype.resize(newLength)​

动态调整 ArrayBuffer 的大小（以字节为单位）。

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });

console.log(buffer.byteLength); // 8

buffer.resize(12);

console.log(buffer.byteLength); // 12

2. ArrayBuffer.prototype.transfer​

ArrayBuffer 是 JavaScript 处理二进制数据的核心对象，但传统的操作（如 slice）会创建新内存并复制数据，对于大内存块（如视频帧、大型数据集）性能开销大。

transfer() 方法允许转移 ArrayBuffer 的所有权 ：创建一个新的 ArrayBuffer ，复用原缓存区的内容，同时使原 ArrayBuffer 失效（可不再访问），避免内存复制。

/** 创建一个 1KB 的缓存区 */
const originalBuffer = new ArrayBuffer(1024);

/** 转移所有权到新的缓存区 */
const newBuffer = originalBuffer.transfer(2048);

// 0 (原缓存区已经失效)
console.log(originalBuffer.byteLength);
// 2048 （新缓存区大小）
console.log(newBuffer.typeLength);

3. SharedArrayBuffer 可增长​

SharedArrayBuffer 现在也是可调整大小的，但只能增长，不能缩小。它不可转移，因此没有 transfer() 方法。

三、 TypedArray.prototype.with()： 不可变修改 TypedArray​

TypedArray（如 Unit8Array、Float64Array）是处理二进制数据的类型化数组，但其原生方法多为 mutable（可变），如需修改元素需手动复制，不符合函数式编程。

with(index, value) 返回一个新的 TypedArray，其中指定的索引的元素被替换，原数组保持不变（不可变操作）：

const uint8 = new Uint8Array([10, 20, 30]);

/** 替换索引为 1 的元素，返回新的数组 */
const newUint8 = uint8.with(1, 255);

// [10, 20, 30]
console.log(uint8);
// [10, 255, 30]
console.log(newUint8);

1. 优势​

  • 与 Array.prototype.with() （ES2023）API 统一，降低学习成本
  • 适合函数式编程场景（如 Redux 状态管理），避免副作用

四、 RegExp v 标志：增强 Unicode 字符集处理​

传统正则的 u 标志虽支持 Unicode，但无法处理复杂的字符集运算（如交集、差集），对多语言、表情符号等场景支持有限。

v 标志（全称 Unicode Set Notation） 引入 Unicode 集合语法，支持：

  • 集合元算：并集（a | b）、交集（&&）、差集（--）
  • 细粒度 Unicode 属性：如 \p{Emoji} 匹配所有的表情符号，\p{Script=Greek} 匹配所有的希腊字母
// 1. 匹配所有表情符号（含肤色修饰）
const emojiRegex = /\p{Emoji}/v;
emojiRegex.test('😊'); // true
emojiRegex.test('🇨🇳'); // true

// 2. 匹配“非元音的小写字母”（差集）
const noVowels = /[[a-z]--[aeiou]]/v;
noVowels.test('b'); // true
noVowels.test('a'); // false

// 3. 匹配“既是字母又是数字的字符”（交集，实际无匹配，仅示例）
const letterAndNumber = /[[a-z]&&[0-9]]/v;

应用场景​

  • 国际化表单验证（如匹配特定语言字符）
  • 文本分析（如提取所有的表情符号、过滤敏感字符）
  • 替代复杂的第三方正则库